<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <style>
        .nav {
            /* height: 50px; */
            /* background-color: red; */
            padding: 20px 0 20px 0;
        }

        .nav button {
            margin: 0 10px;
        }

        .wrap {
            padding: 0 24px;
        }

        .content {
            margin-top: 105px;
        }

        .nav-1 {
            width: calc(100% - 48px);
        }
    </style>
</head>

<body>

    <div class="wrap ">
        <div class="position-fixed top-0 p-0 nav-1">
            <div class="" style="background-color:white">
                <div class="nav position-relative">
                    <span class="fw-bold">仓库</span>
                    <div class=" position-absolute top-0 end-0 " style="padding:20px 8px 8px 8px;">
                        <button type="submit" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                            data-bs-target="#exampleModal">新增</button>
                        <button type="button" class="btn btn-outline-dark btn-sm">禁用</button>
                        <button type="button" class="btn btn-outline-dark btn-sm">启用</button>
                        <button type="button" class="btn btn-outline-dark btn-sm refresh">刷新</button>
                    </div>
                </div>
                <table class="table table-bordered">
                    <thead calss="table-bordered">
                        <tr>
                            <th class="text-center" style="width:100px">操作</td>
                            <th class="text-center" style="width:100px">仓库编号</td>
                            <th class="text-center" style="width:500px">仓库名称</th>
                            <th style="width:56.5px;text-align:center">
                                状态
                            </th>
                            <th class="col"></th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
        <div class="content">
            <table class="table table-bordered">
                <tbody class="table-bordered rand">
                    <tr>
                        <td class="text-center" style="width:100px"><button type="button" class="btn btn-primary"
                                style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">编辑
                            </button></td>
                        <td class="text-center" style="width:100px">3</td>
                        <td class="text-center" style="width:500px">3</td>

                        <td style="width:50px;text-align:center">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" role="switch"
                                    id="flexSwitchCheckDefault">
                            </div>
                        </td>
                        <td class="col"></td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>


    <!-- --------------- -->
    <div class="modal fade " id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">新增仓库</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="input-group mb-3">
                        <label for="colFormLabelSm" class="col-sm-3 col-form-label col-form-label-sm">仓库名称
                        </label>
                        <input type="text" class="form-control warehousename" placeholder="请输入名称"
                            aria-label="Recipient's username" aria-describedby="button-addon2">

                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button " class="btn btn-primary save" data-bs-dismiss="modal">保存</button>
                </div>
            </div>
        </div>
    </div>
    <script src="/js/checka.js"></script>
    <script>
        select()
        // 新增
        $(".save").click(function () {
            if ($(".warehousename").val() != "") {
                $.ajax({
                    method: "post",
                    url: "http://localhost:3000/warehouseadd/add",
                    data: {
                        "warehousename": $(".warehousename").val()
                    },
                    success: function (data) {
                        console.log(data);
                        select();
                    },
                    error: function (e) {
                        console.log(JSON.stringify(e));
                    }
                })
            } else {
                alert("类别名不能为空")
            }
        }
        );
        // 刷新页面数据
        $(".refresh").click(function () {
            select()
        })

        function rander(data) {
            let html = "";
            console.log(data)
            console.log("渲染")
            data.forEach(item => {
                console.log(item)
                html += `
                <tr>
                        <td class="text-center" style="width:100px"><button type="button" class="btn btn-primary"
                                style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
                                编辑
                            </button></td>
                            <td class="text-center" style="width:100px">${ item.warehousenumber }</td>
                        <td class="text-center" style="width:500px">${ item.warehousename }</td>
                        <td style="width:50px;text-align:center" class="slide">
                            <div class="form-check form-switch">
                                <input class="form-check-input " type="checkbox" role="switch"
                                    id="flexSwitchCheckDefault" ${ item.start == 0 ? "checked" : "" }>
                            </div>
                        </td>
                        <td class="col"></td>
                    </tr>
                `
            });
            console.log(html)
            $(".rand").html(html);
        };
        // 加载页面渲染数据
        function select() {
            console.log("加载")
            $.ajax({
                method: "post",
                url: "http://localhost:3000/warehouseadd/select",
                data: {},
                success: function (data) {
                    rander(data);
                },
                error: function (e) {
                    console.log(JSON.stringify(e));
                }
            });
        }
    </script>
</body>

</html>